import React, {Component} from 'react';
import Circle from './Circle';

require('./css/frame.css');

export default class P8 extends Component {
    constructor(...args) {
        super(...args);
        this.state = {
            index: [1, 0],
            flag: "none",
        }
    }

    onShow() {
        this.setState({
            flag: "block",
        })
    }

    onSlider(i) {
        let index = [0, 0];
        index[i] = 1;
        this.setState({
            index
        })
    }

    render() {
        const {index, flag} = this.state;

        return (
            <div id="page">
                <div className="content" id="box8">
                    <h4 className="title">我的行程</h4>
                    <img src={require("./img/8.jpg")} style={{position: 'absolute', left: '30px', top: '75px'}}/>
                </div>
                <p className="p80">将手机APP提前创建的行程安排更新到车机导航收藏夹，车机导航在行程开始前一定时间（可设定）进行提醒，并使用车机导航至行程目标地点。</p>


                <p className="btns8" style={{left: '120px', top: '210px'}} onClick={this.onShow.bind(this, 0)}></p>


                {flag === 'block' && <div className="bdiv8">
                    {index[0] === 1 && <div className="fdiv8">
                        <img src={require("./img/82.jpg")}/>
                        <Circle style={{left: '70px', top: '95px'}}
                                data="APP内搜索行程目标地点"
                        />
                        <Circle style={{left: '70px', top: '125px'}}
                                data="设置行程开始时间"
                        />
                        <Circle style={{left: '70px', top: '155px'}}
                                data="设置行程提醒时间，可在行程开始前按设定时间提醒"
                        />
                        <Circle style={{left: '70px', top: '185px'}}
                                data="可将行程设定为一次性行程或是周期性形成"
                        />
                    </div>}
                    {index[1] === 1 && <div className="fdiv8">
                        <img src={require("./img/84.jpg")}/>
                        <img src={require("./img/85.jpg")}/>
                        <ul>
                            <li>手机与车机连接时，更新到车机导航收藏夹内，选择收藏夹内“我的行程”。</li>
                            <li>选择行程，点击“开始导航”，车机进入导航模式。</li>
                        </ul>
                    </div>}

                    <div id="csld" className="sldcir">
                        {index.map((item, i) => {
                            let sr = (item === 1 ? 'son' : 'soff');
                            return (
                                <img src={require("./img/" + sr + ".png")} onClick={this.onSlider.bind(this, i)}/>);
                        })}
                    </div>
                    <img src={require("./img/81.png")} style={{position: 'absolute', left: '-480px', top: '20px'}}/>
                </div>}

            </div>
        );
    }
}


